﻿import React from 'react'
import ReactDOM from 'react-dom'
import mirror, { actions, connect } from 'mirrorx'

import { FormattedMessage } from 'react-intl'

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      productInfo: {}
    }
  }

  componentDidMount () {
    const { policyInfo } = this.props
    if (!policyInfo || (policyInfo && !policyInfo.length)) {
		  actions.surrenderInfo.requestPolicyInfo()
    }
    const ids = T.urlQuery('productId') || T.urlQuery('chooseId')
    const info = T.getAttrObject(this.props.policyInfo.policyProductList, 'productId', ids)[0]
    this.setState({ productInfo: info })
  }

  render () {
    const Lang = window.LangMessage || {}

    const { policyInfo } = this.props
    let ids = T.urlQuery('productId') || T.urlQuery('chooseId')
    ids = ids.split(',')[0]
    const info = T.getAttrObject(policyInfo.policyProductList, 'productId', ids)[0] || {}

    const frequencyMap = {
      SINGLE: Lang.once_pay || '趸交',
      YEAR: Lang.year_pay || '年缴',
      HALFYEAR: Lang.halfyear_pay || '半年缴',
      QUARTER: Lang.quarter_pay || '季缴',
      MONTH: Lang.month_pay || '月缴'
    }
    const stateMap = {
      'EFFECTIVE': Lang.valid || '有效',
      'EXPIRY': Lang.not_valid || '失效',
      'TERMINATION': Lang.end || '终止'
    }

    console.log(info)
    return (<div className='surrender-detail'>
      <div className='result-head f28'>
        <div className='clearfix result-item bor-bottom'>
          <div className='fl'><FormattedMessage id='policy_name' defaultMessage='险种名称' /></div>
          <div className='fr'>{info.productName || info.packageName}</div>
        </div>

        <div className='clearfix result-item bor-bottom'>
          <div className='fl'><FormattedMessage id='insure_status' defaultMessage='险种状态' /></div>
          <div className='fr'>{stateMap[info.status]}</div>
        </div>
        {frequencyMap[info.payFrequencyTypeEnum] &&
        <div className='clearfix result-item bor-bottom'>
          <div className='fl'><FormattedMessage id='pay_frequency' defaultMessage='缴费频率' /></div>
          <div className='fr'>{frequencyMap[info.payFrequencyTypeEnum]}</div>
        </div>
        }
        <div className='clearfix result-item bor-bottom'>
          <div className='fl'><FormattedMessage id='regular_pay_premium' defaultMessage='期缴保费' /></div>
          <div className='fr'>{T.cutPrice(info.payPeriodValue)}</div>
        </div>
      </div>
    </div>)
  }
}

export default connect(state => {
  return state.surrenderInfo
})(App)
